<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>echarts | 数据挖掘项目</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="icon" href="/assets/logo.jpg">
    <meta name="description" content="Data Mining">
    
    <link rel="preload" href="/assets/css/0.styles.0d66e9f8.css" as="style"><link rel="preload" href="/assets/js/app.58a4f135.js" as="script"><link rel="preload" href="/assets/js/2.46bed51d.js" as="script"><link rel="preload" href="/assets/js/9.a72ecd08.js" as="script"><link rel="prefetch" href="/assets/js/10.b45d518a.js"><link rel="prefetch" href="/assets/js/11.609ae628.js"><link rel="prefetch" href="/assets/js/3.00f51676.js"><link rel="prefetch" href="/assets/js/4.2a5b3e1a.js"><link rel="prefetch" href="/assets/js/5.1df1db3a.js"><link rel="prefetch" href="/assets/js/6.fb1784b8.js"><link rel="prefetch" href="/assets/js/7.d79025f2.js"><link rel="prefetch" href="/assets/js/8.7bc753a2.js">
    <link rel="stylesheet" href="/assets/css/0.styles.0d66e9f8.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">数据挖掘项目</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">
  主页
</a></div><div class="nav-item"><a href="/guide/tech/" class="nav-link router-link-active">
  技术文档
</a></div><div class="nav-item"><a href="/guide/visualization/01.html" class="nav-link">
  具体效果
</a></div><div class="nav-item"><a href="http://sim.whu.edu.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  友情链接
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">
  主页
</a></div><div class="nav-item"><a href="/guide/tech/" class="nav-link router-link-active">
  技术文档
</a></div><div class="nav-item"><a href="/guide/visualization/01.html" class="nav-link">
  具体效果
</a></div><div class="nav-item"><a href="http://sim.whu.edu.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  友情链接
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>echarts</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/tech/echarts入门.html" class="active sidebar-link">echarts</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/tech/echarts入门.html#快速上手" class="sidebar-link">快速上手</a></li><li class="sidebar-sub-header"><a href="/guide/tech/echarts入门.html#通用配置" class="sidebar-link">通用配置</a></li><li class="sidebar-sub-header"><a href="/guide/tech/echarts入门.html#柱状图bar" class="sidebar-link">柱状图bar</a></li><li class="sidebar-sub-header"><a href="/guide/tech/echarts入门.html#折线图line" class="sidebar-link">折线图line</a></li><li class="sidebar-sub-header"><a href="/guide/tech/echarts入门.html#散点图scatter" class="sidebar-link">散点图scatter</a></li><li class="sidebar-sub-header"><a href="/guide/tech/echarts入门.html#直角坐标系配置" class="sidebar-link">直角坐标系配置</a></li><li class="sidebar-sub-header"><a href="/guide/tech/echarts入门.html#饼图pie" class="sidebar-link">饼图pie</a></li><li class="sidebar-sub-header"><a href="/guide/tech/echarts入门.html#地图map" class="sidebar-link">地图map</a></li><li class="sidebar-sub-header"><a href="/guide/tech/echarts入门.html#雷达图radar" class="sidebar-link">雷达图radar</a></li><li class="sidebar-sub-header"><a href="/guide/tech/echarts入门.html#仪表盘图gauge" class="sidebar-link">仪表盘图gauge</a></li><li class="sidebar-sub-header"><a href="/guide/tech/echarts入门.html#主题设置" class="sidebar-link">主题设置</a></li><li class="sidebar-sub-header"><a href="/guide/tech/echarts入门.html#调色盘" class="sidebar-link">调色盘</a></li><li class="sidebar-sub-header"><a href="/guide/tech/echarts入门.html#样式" class="sidebar-link">样式</a></li><li class="sidebar-sub-header"><a href="/guide/tech/echarts入门.html#自适应" class="sidebar-link">自适应</a></li><li class="sidebar-sub-header"><a href="/guide/tech/echarts入门.html#动画" class="sidebar-link">动画</a></li><li class="sidebar-sub-header"><a href="/guide/tech/echarts入门.html#交互api" class="sidebar-link">交互api</a></li></ul></li><li><a href="/guide/tech/echarts进阶使用.html" class="sidebar-link">test</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>vue-press</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="echarts"><a href="#echarts" class="header-anchor">#</a> echarts</h1> <p>基于ZRender矢量图形库进行封装开发</p> <p>echats支持流数据的动态渲染（提供增量渲染技术，类似于懒加载）</p> <h2 id="快速上手"><a href="#快速上手" class="header-anchor">#</a> 快速上手</h2> <p>​    0.引入echarts.js文件</p> <div class="language-html line-numbers-mode"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><ol><li><p>准备一个呈现图标的div</p></li> <li><p>初始化一个echarts实例对象</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> echarts <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'#echarts'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></li> <li><p>准备配置项</p></li> <li><p>将配置项设置给实例对象</p></li></ol> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> mcharts <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'echarts'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> option <span class="token operator">=</span> <span class="token punctuation">{</span>
    xAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
        type<span class="token operator">:</span> <span class="token string">'category'</span><span class="token punctuation">,</span> <span class="token comment">// 类目轴</span>
        data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'a'</span><span class="token punctuation">,</span><span class="token string">'b'</span><span class="token punctuation">,</span><span class="token string">'c'</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    yAxis<span class="token operator">:</span> <span class="token punctuation">{</span>
        type<span class="token operator">:</span> <span class="token string">'value'</span> <span class="token comment">// 数值轴，值从series取</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    series<span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span>
            name<span class="token operator">:</span> <span class="token string">'Math'</span><span class="token punctuation">,</span>
            type<span class="token operator">:</span> <span class="token string">'line'</span><span class="token punctuation">,</span> <span class="token comment">// 决定图标的类型</span>
            data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">70</span><span class="token punctuation">,</span><span class="token number">92</span><span class="token punctuation">,</span><span class="token number">99</span><span class="token punctuation">]</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
mcharts<span class="token punctuation">.</span><span class="token function">setOption</span><span class="token punctuation">(</span>option<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br></div></div><p>常用图表：柱状图、饼图、折线图、散点图、地图、雷达图、仪表盘图</p> <h2 id="通用配置"><a href="#通用配置" class="header-anchor">#</a> 通用配置</h2> <h3 id="title"><a href="#title" class="header-anchor">#</a> title</h3> <p>文字样式（textStyle）、标题边框（borderWidth等）、标题位置（left/top...）</p> <h3 id="tooltip"><a href="#tooltip" class="header-anchor">#</a> tooltip</h3> <p>是一个提示框组件，用于配置鼠标滑过或点击图表时的显示框</p> <p><strong>注意：tooltip用div显示，所以可能会发生样式冲突</strong></p> <p>触发类型：trigger（item,axis）</p> <p>触发时机：triggerOn（mouseover,click）</p> <p>格式化：formatter（支持字符串模板和回调函数）</p> <blockquote><p>https://echarts.apache.org/zh/option.html#tooltip.formatter</p></blockquote> <h3 id="toolbox"><a href="#toolbox" class="header-anchor">#</a> toolbox</h3> <p>是一个工具栏，内置有导出图片(SaveAsImage)、数据视图(dataView)、动态类型切换(magicType)、数据区域缩放(dataZoom)和重置(restore)5个工具</p> <p>magicType只能切换bar、line、stack</p> <h3 id="legend"><a href="#legend" class="header-anchor">#</a> legend</h3> <p>图例，配合series系列使用，用于筛选系列</p> <p>legend提供data数组，元素是series中值的name</p> <h2 id="柱状图bar"><a href="#柱状图bar" class="header-anchor">#</a> 柱状图bar</h2> <p>设置x，y轴数据类型以及数据源，然后设置ytpe为bar</p> <p>最大/小值设置：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>markPoint<span class="token operator">:</span> <span class="token punctuation">{</span>data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>type<span class="token operator">:</span> <span class="token string">'max'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'最大值'</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span>type<span class="token operator">:</span> <span class="token string">'min'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'最小值'</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>平均值线设置：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>markLine<span class="token operator">:</span> <span class="token punctuation">{</span>data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>type<span class="token operator">:</span> <span class="token string">'average'</span><span class="token punctuation">,</span> name<span class="token operator">:</span> <span class="token string">'平均值'</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>数值显示label：</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>label<span class="token operator">:</span> <span class="token punctuation">{</span>show<span class="token operator">:</span><span class="token boolean">true</span><span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>同时还可以设置柱状图排列方向、柱宽度（barWidth）等</p> <h2 id="折线图line"><a href="#折线图line" class="header-anchor">#</a> 折线图line</h2> <p>一般用折线图来表现变化趋势</p> <p>同样有markPoint, markLine, label，同时有标注区间（markArea）,data中的元素是一个数组，里面是开始和结束的位置，用键值对形式</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>markArea<span class="token operator">:</span> <span class="token punctuation">{</span>data<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">[</span><span class="token punctuation">{</span>xAxis<span class="token operator">:</span><span class="token string">'a'</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">{</span>xAxis<span class="token operator">:</span><span class="token string">'b'</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>同时可以设置lineStyle，areaStyle等样式</p> <p>y轴可以支持缩放，脱离0值开始的比例： <code>scale: true</code></p> <p>series中元素支持堆叠，只要设置同样的stack值就可以了，比如都为 <code>stack: 'sale'</code></p> <h2 id="散点图scatter"><a href="#散点图scatter" class="header-anchor">#</a> 散点图scatter</h2> <p>一般用来表现变量之间的相关性</p> <p>数据是一个二维数组 [[h1,w1],[h2,w2],[h3,w3]...]</p> <p>xy轴都是value</p> <p>symbolSize可以使不同散点之间的大小不同，支持回调函数</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token function-variable function">symbolSize</span><span class="token operator">:</span> <span class="token parameter">arg</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> height <span class="token operator">=</span> arg<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token operator">/</span><span class="token number">100</span><span class="token punctuation">;</span>
    <span class="token keyword">let</span> weight <span class="token operator">=</span> arg<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword">let</span> bmi <span class="token operator">=</span> weight <span class="token operator">/</span> <span class="token punctuation">(</span>height <span class="token operator">*</span> height<span class="token punctuation">)</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span>bmi <span class="token operator">&gt;</span> <span class="token number">28</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token number">20</span>
    <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token number">5</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><p>itemStyle也可以支持回调函数，可以用来改变颜色等</p> <p>涟漪动画效果：<code>type: effectScatter</code>,然后设置rippleEffect来配置动画</p> <h2 id="直角坐标系配置"><a href="#直角坐标系配置" class="header-anchor">#</a> 直角坐标系配置</h2> <h3 id="grid"><a href="#grid" class="header-anchor">#</a> grid</h3> <p>用来控制坐标系的布局和大小，xy轴基于grid展示</p> <p>show: true展示网格</p> <p>left等可以调整位置</p> <p>同时也可以直接设置大小</p> <h3 id="axis"><a href="#axis" class="header-anchor">#</a> axis</h3> <p>一个ggrid中最多有两种位置的x轴和y轴</p> <p>type: value直接从series的data中读取数据，category需要设置data数据</p> <p>position设置位置 x(top/bottom), y(left/right)</p> <h3 id="datazoom"><a href="#datazoom" class="header-anchor">#</a> dataZoom</h3> <p>可以在toolbox中配置dataZoom，但是也可以</p> <p>dataZoom可以数组，可以配置多个区域缩放器</p> <p>type(slider/inside)，slider生成底部滑块进行缩放，inside使用鼠标滚轮进行缩放</p> <p>可以指明产生作用的轴，(y/x)AxisIndex,只有一个就是0</p> <p>可以使用start和end（百分比数字）来指定初始缩放状态</p> <h2 id="饼图pie"><a href="#饼图pie" class="header-anchor">#</a> 饼图pie</h2> <p>饼图的数据应该是一个数组，里面的元素是一个对象，拥有name和value，如 <code>data = [{name:'a', value: 111}, {name: 'b', value: 222}]</code></p> <p>配置label的formatter可以改变文字显示（arg.name,value,percent）</p> <p>可以设置radius来实现圆环，<code>radius: [内圆半径, 外圆半径]</code></p> <p>南丁格尔图（不同半径的圆块） <code>roseType: 'radius'</code></p> <p>选中效果： selectedMode: 'single（选中偏离原点一小段距离，离开返回）/mutiple（多个效果同时存在）'，selectedOffset设置偏离距离</p> <h2 id="地图map"><a href="#地图map" class="header-anchor">#</a> 地图map</h2> <p>可以使用矢量地图或者百度地图的api</p> <ol><li>需要将矢量地图素材（json格式）放在json/map下</li> <li>使用jQuery ajax获取</li></ol> <div class="language-js line-numbers-mode"><pre class="language-js"><code>$<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'json/map/china.json'</span><span class="token punctuation">,</span> <span class="token parameter">chinajson</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  echarts<span class="token punctuation">.</span><span class="token function">registerMap</span><span class="token punctuation">(</span><span class="token string">'chinaMap'</span><span class="token punctuation">,</span> chinajson<span class="token punctuation">)</span>  
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>3.在option的geo下设置 type为map，map指向chinaMap</p> <p>常用配置项：</p> <p>roam：true 可拖动效果</p> <p>label： {show: true}展示名称并进行相关格式化</p> <p>zoom：设置初始缩放大小</p> <p>center：配置中心点的经纬度数组</p> <p>一般需要配置series来实现更多功能，一般会给data一个数组，里面是包含name和需要展示深浅颜色的value的对象，然后将series关联到geo <code>geoIndex: 0, type: 'map'</code>，最后配置visualMap,配置max/min和inRange的color</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>visualMap<span class="token operator">:</span> <span class="token punctuation">{</span>
    min<span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
    max<span class="token operator">:</span> <span class="token number">300</span><span class="token punctuation">,</span>
    inRange<span class="token operator">:</span> <span class="token punctuation">{</span>color<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'white'</span><span class="token punctuation">,</span> <span class="token string">'red'</span><span class="token punctuation">]</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
    calculabe<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">//使用滑块实现动态筛选</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><h2 id="雷达图radar"><a href="#雷达图radar" class="header-anchor">#</a> 雷达图radar</h2> <ol><li>定义各个维度的最大值 <code>indicator: [{name: 'x', max: 100},{}]</code></li> <li>准备具体的数据 <code>data: [name: 'a', value: [60,70,...], {}]</code></li> <li>设置series的type为radar</li></ol> <p>常用配置：label，areaStyle, shape（最外部形状，有polygon,circle等）</p> <h2 id="仪表盘图gauge"><a href="#仪表盘图gauge" class="header-anchor">#</a> 仪表盘图gauge</h2> <ol><li>准备数据设置给series下的data，这是指针所指向的位置 <code>data: {[value: 97]}</code></li> <li>设置series的type为gauge</li></ol> <p>常用配置：min, max, itemStyle（指针样式）</p> <h2 id="主题设置"><a href="#主题设置" class="header-anchor">#</a> 主题设置</h2> <p>echarts提供了内置主题（light，dark），同时也可以自定义主题</p> <p>主题可以在init时指定 <code>var echart = echarts.init(dom,'light')</code></p> <p>自定义主题配置</p> <ol><li>在主题编辑器https://echarts.apache.org/zh/theme-builder.html中编辑主题并且命名</li> <li>下载主题为js文件</li> <li>引入js文件，在init中以名字引入使用</li></ol> <h2 id="调色盘"><a href="#调色盘" class="header-anchor">#</a> 调色盘</h2> <p>调色盘是一组颜色，图形和系列都会从中选择颜色，有主题调色盘、全局调色盘和局部调色盘</p> <p>全局调色盘在option中配置color数组，会覆盖主题调色盘 <code>option = {color: ['red', 'pruple',...]}</code></p> <p>局部调色盘在series的某个元素中设置，同样是color数组</p> <p>颜色也可以设置渐变</p> <p>线性渐变：(x,y)到(x2,y2)的方向指定渐变方向，offset代表百分比，所以1是100%，如果 globalCoord 为 <code>true</code>，则该四个值是绝对的像素位置</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code>itemStyle<span class="token operator">:</span> <span class="token punctuation">{</span>
    color<span class="token operator">:</span> <span class="token punctuation">{</span>
        type<span class="token operator">:</span> <span class="token string">'linear'</span><span class="token punctuation">,</span>
        x<span class="token operator">:</span><span class="token number">0</span><span class="token punctuation">,</span>y<span class="token operator">:</span><span class="token number">0</span><span class="token punctuation">,</span>x2<span class="token operator">:</span><span class="token number">0</span><span class="token punctuation">,</span>y2<span class="token operator">:</span><span class="token number">1</span><span class="token punctuation">,</span>
        colorStops<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span>offset<span class="token operator">:</span><span class="token number">0</span><span class="token punctuation">,</span> color<span class="token operator">:</span> <span class="token string">'red'</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>offset<span class="token operator">:</span><span class="token number">1</span><span class="token punctuation">,</span> color<span class="token operator">:</span> <span class="token string">'blue'</span><span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
        globalCoord<span class="token operator">:</span> <span class="token boolean">false</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h2 id="样式"><a href="#样式" class="header-anchor">#</a> 样式</h2> <p>样式分为直接样式和高亮样式（鼠标滑过/点击效果）</p> <p>用itemStyle，textStyle等设置直接样式</p> <p>高亮样式就是设置emphasis对象，中间包含itemStyle等设置样式</p> <h2 id="自适应"><a href="#自适应" class="header-anchor">#</a> 自适应</h2> <ol><li>监听窗口大小变化</li> <li>在事件处理函数中调用echarts实例对象的resize方法</li></ol> <div class="language-js line-numbers-mode"><pre class="language-js"><code>window<span class="token punctuation">.</span>onresize <span class="token operator">=</span> mChart<span class="token punctuation">.</span>resize
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h2 id="动画"><a href="#动画" class="header-anchor">#</a> 动画</h2> <h3 id="加载动画"><a href="#加载动画" class="header-anchor">#</a> 加载动画</h3> <p>加载动画是在数据还未加载完时显示的动画</p> <p>mChart.showLoading()显示加载动画,mChart.hideLoading()隐藏加载动画</p> <p>在ajax请求前用show，得到请求数据后用hide</p> <h3 id="增量动画"><a href="#增量动画" class="header-anchor">#</a> 增量动画</h3> <p>是数据改变时展示的动画</p> <p>比如buttton的onclick事件的回调函数中，可以用option指向新数据（其他相同项不需要重复，因为新旧option会合并），再用setOption展示增量动画</p> <h3 id="动画常用配置项"><a href="#动画常用配置项" class="header-anchor">#</a> 动画常用配置项</h3> <p>animation：false关闭动画（默认为true）</p> <p>animationDuration： 3000 毫秒动画时长，也可以使用回调函数产生不同时长的动画效果，arg是元素编号</p> <p>animationEasing： ‘linear' 缓动动画，设置贝塞尔曲线</p> <p>animationThreshold： 8 设置阈值，单种元素数量大于阈值就会关闭动画</p> <h2 id="交互api"><a href="#交互api" class="header-anchor">#</a> 交互api</h2> <p>全局echarts对象的方法：init，registerTheme，registerMap，connect</p> <p>connect可以将多个图表进行关联 <code>echarts.connect([mchart, nchart])</code>，保存/刷新等操作时会同时响应</p> <p>echarts实例对象的方法：setOption，resize，on/off，dispatchAction，clear，dispose</p> <p>on/off用于绑定或者解绑事件，事件可以是原生的事件（click，mousemove等），也可以是echarts事件https://echarts.apache.org/zh/api.html#events</p> <p><code>mchart.on('click',arg =&gt; {})</code></p> <p>dispatchAction用于模拟用户的动作，传入行为类型type，seriesIndex为图表索引，dataIndex为某一部分的单独行为</p> <p>clear清空当前实例，但是可以用setOption快速的重新绘制，但是dispose不能</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><!----> <span class="next"><a href="/guide/tech/echarts进阶使用.html">
        test
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"></div></div>
    <script src="/assets/js/app.58a4f135.js" defer></script><script src="/assets/js/2.46bed51d.js" defer></script><script src="/assets/js/9.a72ecd08.js" defer></script>
  </body>
</html>
